<template>
  <el-row :gutter="20" class="m-t-5px">
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">Spu款式数量</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <span class="card-panel-num">{{
            itemData.spuQuantity ? itemData.spuQuantity : "未更新"
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">本月上新</span>
          <span
            ><span class="text">{{ itemData.spuQuantityLastMonth }}</span></span
          >
        </div>
      </el-card>
    </el-col>
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <chartDataI :echartDataSku="crowdTrendeList" />

      
    </el-col> -->
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <div id="KoiCardI" style="width: 250px; height: 170px"></div>
    </el-col> -->
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">sku种类数量</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{
            itemData.skuQuantity ? itemData.skuQuantity : "未更新"
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">本月新增</span>
          <span
            ><span class="text">{{ itemData.skuQuantityLastMonth }}</span></span
          >
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">商品出库件数</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{
            itemData.outWarehouseQuantity
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">昨日</span>
          <span
            ><span class="text">{{
              itemData.outWarehouseQuantityYesterday
            }}</span></span
          >
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text"> 商品库存数量</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{
            itemData.inventoryQuantity ? itemData.inventoryQuantity : "未更新"
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <!-- <span class="text"> 当前销售完成</span>
          <span
            ><span class="text">{{ itemData.completeRate + "%" }}</span></span
          > -->
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text"> 在销商品数量</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{
            itemData.onSaleQuantity ? itemData.onSaleQuantity : "未更新"
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <!-- <span class="text"> 当前销售完成</span>
          <span
            ><span class="text">{{ itemData.completeRate + "%" }}</span></span
          > -->
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script >
// @ts-ignore
import CountTo from "vue-count-to";
// import { reactive } from "vue";
export default {
  components: {
    // PanelGroup,
    CountTo,

    // KoiCard,
  },
  props: {
    biNumberItem: {
      type: Array,
      default: () => [],
    },
    itemData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      crowdTrendeList: {},
      //Sku传递数据
      echartDataSku: {
        columns: [],
        rows: [],
      },
      query: {},
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      PurchaseBasicsDwdList: [],
      PurchaseBasicsDwdTotal: 0,
      isOpen: false,
      cardList: [
        {
          title1: "上月支付订单",
          unit: "月",
          value1: 6600,
          title2: "总订单数量",
          value2: 7000,
        },
        {
          title1: "上月退款订单",
          unit: "月",
          value1: 400,
          title2: "退款金额",
          value2: 8000,
        },
        {
          title1: "上月利润",
          unit: "月",
          value1: 66000,
          title2: "盈利",
          value2: 6666,
        },
        {
          title1: "上月新增用户",
          unit: "月",
          value1: 66,
          title2: "上月登录用户",
          value2: 300,
        },
      ],
    };
  },
  watch: {
    itemData: {
      handler: function (newnew, oldold) {
        if (JSON.stringify(newnew) != "{}") {
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    init() {},
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.card-panel-text {
  line-height: 18px;
  // color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
  font-weight: 600;
}
.text {
  // color: rgba(0, 0, 0, 0.45);
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
